<template>
  <div class="huihua">
    <session-list title="当前会话" IsFilter="false" v-if="clear">
      <span
        v-for="(item, idx) in sessionList"
        @click="SelectMsg(idx)"
        :key="item.name"
      >
        <session-item
          :mydata="item"
          :clickStyle="item.style"
          :idx="idx"
          @clearStyle="clearStyle(sessionList, $event)"
        ></session-item>
      </span>
    </session-list>

    <session-box :info="info" v-if="fresh"></session-box>
  </div>
</template>

<script>
import SessionItem from "@/components/Session/SessionItem";
import SessionList from "@/components/Session/SessionList";
import SessionBox from "@/components/Session/SessionBox/SessionBox";
export default {
  components: {
    SessionItem,
    SessionList,
    SessionBox,
  },
  created() {
    this.$axios.get("/session").then((res) => {
      this.sessionList = res.data.sessionList;
    });
    setTimeout(() => {
      for (let i in this.sessionList) {
        this.sessionList[i]["style"] = true;
      }
      console.log("sessionList");
      console.log(this.sessionList);
      this.info = this.sessionList[0];
    }, 1000);
  },
  mounted() {
    this.$store.commit("setTitle", "会话");
    this.$store.commit("NavStyleClear", "会话");
  },
  data() {
    return {
      clear: true,
      fresh: true,
      sessionList: [],
      info: {},
    };
  },
  methods: {
    SelectMsg(idx) {
      this.fresh = false;
      this.info = this.sessionList[idx];
      console.log("info : ");
      console.log(this.info);
      this.$nextTick(() => {
        this.fresh = true;
      });
    },
    clearStyle(items, ev) {
      this.clear = false;
      for (let i in items) {
        items[i].style = false;
      }
      items[ev].style = true;
      this.$nextTick(() => {
        this.clear = true;
      });
      console.log("gdan");
      console.log(ev);
    },
  },
};
</script>

<style>
.huihua {
  display: flex;
}
</style>